<template>
    <div>
        <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
    </div>
    

    
</template>
<script>

import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import {SysMixin} from '@/mixins/SysMixin'
import draggable from 'vuedraggable'


export default {
    name:'TagAttribute',
    components:{ExtForm,draggable},
    mixins:[SysMixin],
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        
    },
    data(){
        return{
            pageSetting,
            formfields:[
                {field:'label',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.label,rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'color',label:'颜色',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["color"],rules: [{ required: false, message: '不能为空!' }]},
                {field:'text',label:'内容',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["text"],}
                
           ],

        }
    },
   
    created(){
        
    },
    methods:{
        changeEventHandler(item){
            if(item["label"]){
                this.component.label=item.label
                for(let i=0;i<this.component.components.length;i++){
                    if(this.component.components[i].type==pageSetting.常量.组件.标题){
                        this.component.components[i].label=item.label
                    }
                }
            }else{
                for (const key in item) {
                    Vue.set(this.component.props,key,item[key])
                }
            }
        },
        
    }
}
</script>